<template>
  <div class="content-review">
    <el-card class="mb-3">
      <template #header>
        <div class="card-header">
          <span>内容审核</span>
          <div>
            <el-button type="primary" @click="refreshData">刷新</el-button>
          </div>
        </div>
      </template>
      
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="待审核" name="pending"></el-tab-pane>
        <el-tab-pane label="已通过" name="approved"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="rejected"></el-tab-pane>
      </el-tabs>
      
      <el-table :data="reviewList" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="scope">
            <el-tag :type="getTypeTagType(scope.row.type)">
              {{ getTypeLabel(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120" />
        <el-table-column prop="submitTime" label="提交时间" width="180" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="viewContent(scope.row)">查看</el-button>
            <el-button 
              v-if="scope.row.status === 'pending'" 
              size="small" 
              type="success" 
              @click="approveContent(scope.row)"
            >
              通过
            </el-button>
            <el-button 
              v-if="scope.row.status === 'pending'" 
              size="small" 
              type="danger" 
              @click="rejectContent(scope.row)"
            >
              拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 内容详情对话框 -->
    <el-dialog v-model="detailDialogVisible" :title="currentContent.title" width="700px">
      <div class="content-detail">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="类型">{{ getTypeLabel(currentContent.type) }}</el-descriptions-item>
          <el-descriptions-item label="作者">{{ currentContent.author }}</el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ currentContent.submitTime }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTagType(currentContent.status)">
              {{ getStatusLabel(currentContent.status) }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
        
        <div class="content-preview">
          <h3>内容预览</h3>
          <div v-html="currentContent.content" class="content-html"></div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button 
            v-if="currentContent.status === 'pending'" 
            type="success" 
            @click="approveContent(currentContent)"
          >
            通过
          </el-button>
          <el-button 
            v-if="currentContent.status === 'pending'" 
            type="danger" 
            @click="rejectContent(currentContent)"
          >
            拒绝
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'ContentReview',
  setup() {
    // 数据状态
    const loading = ref(false)
    const detailDialogVisible = ref(false)
    const activeTab = ref('pending')
    
    // 审核列表
    const reviewList = ref([
      {
        id: 1,
        title: '我的剪纸作品分享',
        type: 'user_content',
        author: '用户A',
        submitTime: '2023-05-25 14:30:00',
        status: 'pending',
        content: '<p>这是我最近创作的一幅剪纸作品，主题是春天的花朵。</p><p>使用了传统的对称剪纸技法，花了大约3个小时完成。</p>'
      },
      {
        id: 2,
        title: '剪纸技法心得体会',
        type: 'user_content',
        author: '用户B',
        submitTime: '2023-05-24 11:45:00',
        status: 'pending',
        content: '<p>在学习剪纸的过程中，我发现掌握好剪刀的角度和力度非常重要。</p><p>特别是在处理细节部分时，需要更加耐心和细致。</p>'
      },
      {
        id: 3,
        title: '剪纸艺术的历史发展',
        type: 'culture',
        author: '管理员',
        submitTime: '2023-05-20 09:15:00',
        status: 'approved',
        content: '<p>中国剪纸艺术起源于汉代，发展于唐宋，盛行于明清...</p>'
      }
    ])
    
    // 分页信息
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 3
    })
    
    // 当前查看的内容
    const currentContent = reactive({
      id: null,
      title: '',
      type: '',
      author: '',
      submitTime: '',
      status: '',
      content: ''
    })
    
    // 获取审核列表
    const fetchReviewList = async () => {
      loading.value = true
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 500))
        // 实际项目中这里会调用后端API
      } catch (error) {
        ElMessage.error('获取审核列表失败')
      } finally {
        loading.value = false
      }
    }
    
    // 刷新数据
    const refreshData = () => {
      fetchReviewList()
    }
    
    // 标签页切换处理
    const handleTabChange = (tab) => {
      activeTab.value = tab
      fetchReviewList()
    }
    
    // 查看内容详情
    const viewContent = (row) => {
      Object.assign(currentContent, row)
      detailDialogVisible.value = true
    }
    
    // 通过内容
    const approveContent = (row) => {
      ElMessageBox.confirm(
        `确定要通过"${row.title}"吗？`,
        '确认通过',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        const index = reviewList.value.findIndex(item => item.id === row.id)
        if (index !== -1) {
          reviewList.value[index].status = 'approved'
        }
        ElMessage.success('内容已通过')
        if (detailDialogVisible.value) {
          detailDialogVisible.value = false
        }
      }).catch(() => {
        // 取消操作
      })
    }
    
    // 拒绝内容
    const rejectContent = (row) => {
      ElMessageBox.confirm(
        `确定要拒绝"${row.title}"吗？`,
        '确认拒绝',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        const index = reviewList.value.findIndex(item => item.id === row.id)
        if (index !== -1) {
          reviewList.value[index].status = 'rejected'
        }
        ElMessage.success('内容已拒绝')
        if (detailDialogVisible.value) {
          detailDialogVisible.value = false
        }
      }).catch(() => {
        // 取消操作
      })
    }
    
    // 获取类型标签类型
    const getTypeTagType = (type) => {
      const typeMap = {
        culture: 'primary',
        tutorial: 'success',
        news: 'warning',
        user_content: 'info'
      }
      return typeMap[type] || 'info'
    }
    
    // 获取类型标签文本
    const getTypeLabel = (type) => {
      const labelMap = {
        culture: '文化内容',
        tutorial: '教程',
        news: '资讯',
        user_content: '用户内容'
      }
      return labelMap[type] || '未知'
    }
    
    // 获取状态标签类型
    const getStatusTagType = (status) => {
      const statusMap = {
        pending: 'warning',
        approved: 'success',
        rejected: 'danger'
      }
      return statusMap[status] || 'info'
    }
    
    // 获取状态标签文本
    const getStatusLabel = (status) => {
      const labelMap = {
        pending: '待审核',
        approved: '已通过',
        rejected: '已拒绝'
      }
      return labelMap[status] || '未知'
    }
    
    // 分页处理
    const handleSizeChange = (val) => {
      pagination.pageSize = val
      fetchReviewList()
    }
    
    const handleCurrentChange = (val) => {
      pagination.currentPage = val
      fetchReviewList()
    }
    
    // 组件挂载时获取数据
    onMounted(() => {
      fetchReviewList()
    })
    
    return {
      loading,
      detailDialogVisible,
      activeTab,
      reviewList,
      pagination,
      currentContent,
      refreshData,
      handleTabChange,
      viewContent,
      approveContent,
      rejectContent,
      getTypeTagType,
      getTypeLabel,
      getStatusTagType,
      getStatusLabel,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.mb-3 {
  margin-bottom: 1rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.content-detail {
  padding: 20px 0;
}

.content-preview {
  margin-top: 20px;
}

.content-preview h3 {
  margin-bottom: 15px;
  color: #303133;
}

.content-html {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f5f7fa;
  min-height: 200px;
}
</style>